import React, { Component } from 'react';
import GoBack from '@/components/TheGoBack'
import { Button, Form, Space, Select } from "antd";
import KongKim from "./kongKim";
import { apiGetDbAreaList, apiAddCityCarousel, apiGetConfigCarousel, apiEditCityCarousel} from '@/request/category'
const { Option } = Select
class Add extends Component {
    constructor(props) {
        super(props)
        this.state = {
            btnLoading: false,
            options: [],
            centerId: '',
        }
    }

    async componentDidMount() {
        const { id } = this.props.match.params
        if (id !== "null") {
            await this.getData(id)
        }
        await this.getCity()
    }
    getCity = async (e) => {
        const res = await apiGetDbAreaList();
        if (res.code === 0) {
            let ot = this.showCityFormat(res.data)
            this.setState({
                options: ot
            })
        }
    }
    getData = async (e) => {
        const res = await apiGetConfigCarousel({
            centerId:e,
            pageNo:1,
            pageSize:15
        });
        if (res.code === 0) {
            this.setState({
                centerId: res.data.city[0].centerId,
            })
            let ot = this.showCityFormat(res.data.city)
            this.formRef.setFieldsValue({
                cityDTOS: ot,
                hbConfigCarouselDTOS: res.data.page.records
            });
            this.childRef.showData(res.data.page.records)
        }
    }
    handleChildEvent = (ref) => {
        this.childRef = ref;
    }
    //form表单确定事件
    onFinish = async (values) => {
        // console.log(values)
        if (this.props.match.params.id === "null") {
            // const arr = values.hbConfigCarouselDTOS
            // const newListLength = new Set(arr.map(item=>item.configCarouselSort)).size;
            // const listLength = arr.length;
            // if(listLength>newListLength){
            //     // console.log("重复");
            //     React.$message({
            //         type: "error",
            //         content: "金刚区内列表存在序号重复",
            //     });
            //     return
            // }
            let params = {
                cityDTOS:this.cityFormat(values.cityDTOS),
                hbConfigCarouselDTOS:values.hbConfigCarouselDTOS
            }
            const res = await apiAddCityCarousel({...params});
            if (res.code === 0) {
                React.$message({
                    type: "info",
                    content: "新增成功",
                });
                this.props.history.goBack()
            }
        }
        else {
            let params = {
                cityDTOS:this.cityFormat(values.cityDTOS),
                hbConfigCarouselDTOS:values.hbConfigCarouselDTOS,
            }
            const res = await apiEditCityCarousel({...params});
            if (res.code === 0) {
                React.$message({
                    type: "info",
                    content: "修改成功",
                });
                this.props.history.goBack()
            }
        }

    }
    showCityFormat = (e) =>{
        return e.map(v => {
            return {
                value: v.areaCode,
                label: v.cityNameZh
            }
        })
    }
    cityFormat = (e) => {
        let a = []
        e.map(item=>{
            if (this.state.centerId){
                a.push({
                    areaCode: item.value,
                    cityNameZh: item.label,
                    centerId: this.state.centerId
                })
            }
            else{
                a.push({
                    areaCode: item.value,
                    cityNameZh: item.label
                })
            }
        })
        return a
    }
    handleCityChange = (e) => {
        console.log(e)
    }
    refreshData = (e) =>{
        this.formRef.setFieldsValue({ hbConfigCarouselDTOS: e });
    }
    render() {
        let { btnLoading,options,centerId } = this.state;
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title={this.props.match.params.id === "null" ? "新增" : "编辑"} />
                <div className="p-layout-content">
                    <Form
                        onFinish={this.onFinish}
                        ref={ref => this.formRef = ref}
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 18,
                        }}
                    >
                        <Form.Item rules={[{ required: true }]} label="城市" name={"cityDTOS"}>
                            <Select
                                disabled={centerId==="1"?true:false}
                                mode="multiple"
                                showSearch
                                allowClear
                                labelInValue
                                optionFilterProp="children"
                                filterOption={(input, option) => (option?.label ?? '').includes(input)}
                                filterSort={(optionA, optionB) =>
                                    (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
                                }
                                onChange={this.handleCityChange}
                                options={options}
                            ></Select>
                        </Form.Item>
                        <Form.Item rules={[{ required: true }]} label="金刚区" name={"hbConfigCarouselDTOS"}>
                            <KongKim refreshData={this.refreshData} onChildEvent={this.handleChildEvent}/>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 4,
                                span: 7,
                            }}
                        >
                            <Space>
                                <Button onClick={() => this.props.history.goBack()}>取消</Button>
                                <Button loading={btnLoading} htmlType="submit" type="primary">保存</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Add;
